import { Button } from "antd/lib/radio";
import * as React from "react";
import { connect } from "react-redux";
import { RouteComponentProps } from "react-router";
import { Dispatch } from "redux";
import { Reducers } from "../../../App";
import { getList } from "./store/actions";
import View from "./view";

interface IProps extends RouteComponentProps {
  list: Array<any>;
  getList: Function;
  tableLoading: boolean;
}

const Index: React.FC<IProps> = props => {
  React.useEffect(() => {
    console.log("props", props);
    props.getList();
  }, []);

  return (
    <div>
      <Button onClick={() => props.getList()}>Refresh</Button>
      <View loading={props.tableLoading} dataSource={props.list} />
    </div>
  );
};

const mapStateToProps = (state: Reducers) => ({
  list: state.manageUserReducer.list,
  tableLoading: state.manageUserReducer.tableLoading
});

const mapDispatchToProps = (dispatch: Dispatch) => {
  return {
    getList() {
      const action: any = getList();
      dispatch(action);
    }
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Index);
